<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="commom::title('首页')"></head>
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }

        .line-data{
            display: flex;


        }
        .true-data{
            border: 1px solid black;
            width: 380px;
            height: 50px;
            margin-left: 15px;

            align-items: center;
            text-align: center;
        }


        .cow2{
            display: flex;
            flex-wrap: wrap;

        }

        .cow2-box{
            width: 90%;
            margin-top: 10px;

        }
        .cow2-box{
            width: 775px;
            height: 368px;
            border: 2px solid black;
            text-align: center;
            margin-left: 15px;
        }

        .title{
            font-weight:700;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .table-detail{
            text-align: center;
            align-items: center;
            background-color:#ffffff;
            min-height:348px;
            padding: 10px;

        }
    </style>
</head>
<body>
<div class="layuimini-main">

    <div  >

        <div class="line-data">
            <div class="true-data">
                <div><h2 id="count1">22</h2></div>
                <div><h4>入住人数</h4></div>
            </div>
            <div class="true-data">
                <div><h2 id="count2">22</h2></div>
                <div><h4>本月访客</h4></div>
            </div>
            <div class="true-data">
                <div><h2 id="count3">22</h2></div>
                <div><h4>寝室数量</h4></div>
            </div>
            <div class="true-data">
                <div><h2 id="count4">22</h2></div>
                <div><h4>本月花销</h4></div>
            </div>
        </div>


        <di class="cow2">

            <div class="cow2-box">
<!--                <div class="title">入住性别</div>-->
                <div id="echarts-table1" class="table-detail" ></div>
            </div>
            <div class="cow2-box">
<!--                <div class="title">入住柱状图</div>-->
                <div id="echarts-table2" class="table-detail"></div>
            </div>
            <div class="cow2-box">
<!--                <div class="title">药品</div>-->
                <div id="echarts-table3"  class="table-detail"></div>
            </div>
            <div class="cow2-box">
<!--                <div class="title">年收费柱状图</div>-->
                <div id="echarts-table4" class="table-detail"></div>
            </div>
        </di>








    </div>





</div>

<script th:src="@{/static/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/lay-config.js(v=1.0.4)}" charset="utf-8"></script>
<script>
    // setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);




 function initTable(res){

     console.log("res=>",res)
     var echartsPies1 = echarts.init(document.getElementById('echarts-table1'), 'walden');
     var optionPies1 = {
         title: {
             text: '性别比',
             left: 'center'
         },
         tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         // legend: {
         //     orient: 'vertical',
         //     left: 'left',
         //     data: ['男', '女']
         // },
         series: [
             {
                 name: '性别比',
                 type: 'pie',
                 radius: '55%',
                 center: ['50%', '60%'],
                 roseType: 'radius',
                 data: res.table1,
                 emphasis: {
                     itemStyle: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 }
             }
         ]
     };
     echartsPies1.setOption(optionPies1);


     var echartsPies2 = echarts.init(document.getElementById('echarts-table2'), 'walden');
     var optionPies2 =  {
         title: {
             text: '年收入',
             left: 'center'
         },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'shadow'
             }
         },
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
         xAxis: [
             {
                 type: 'category',
                 data: res.table2.column,
                 axisTick: {
                     alignWithLabel: true
                 }
             }
         ],
         yAxis: [
             {
                 type: 'value'
             }
         ],
         series: [
             {
                 name: 'Direct',
                 type: 'bar',
                 barWidth: '60%',
                 data: res.table2.count,
             }
         ]
     };
     echartsPies2.setOption(optionPies2);

     var echartsPies3 = echarts.init(document.getElementById('echarts-table3'), 'walden');
     var optionPies3 = {
         title: {
             text: '药品',
             left: 'center'
         },
         tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         // legend: {
         //     orient: 'vertical',
         //     left: 'left',
         //     data: ['感冒药', '痔疮药','头疼药','高烧药']
         // },
         series: [
             {
                 name: '药品',
                 type: 'pie',
                 radius: '55%',
                 center: ['50%', '60%'],
                 roseType: 'radius',
                 data: res.table3,
                 emphasis: {
                     itemStyle: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 }
             }
         ]
     };
     echartsPies3.setOption(optionPies3);


     var echartsPies4 = echarts.init(document.getElementById('echarts-table4'), 'walden');
     var optionPies4 =  {
         title: {
             text: '食堂花销',
             left: 'center'
         },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'shadow'
             }
         },
         grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
         },
         xAxis: [
             {
                 type: 'category',
                 data: res.table4.column,
                 axisTick: {
                     alignWithLabel: true
                 }
             }
         ],
         yAxis: [
             {
                 type: 'value'
             }
         ],
         series: [
             {
                 name: 'Direct',
                 type: 'bar',
                 barWidth: '60%',
                 data: res.table4.count,
             }
         ]
     };
     echartsPies4.setOption(optionPies4);
    }

    function initData(res){
     document.getElementById("count1").innerHTML = res.count1
        document.getElementById("count2").innerHTML = res.count2
        document.getElementById("count3").innerHTML = res.count3
        document.getElementById("count4").innerHTML = res.count4

    }


    layui.use(['layer', 'echarts'], function () {
        const $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;



        $.ajax({
            type: 'get',
            url: '/root/echarts',
            success: function (data) {
               console.log("得到的echarts=>{}",data.data)
               var res = data.data;
                initTable(res)
                initData(res)
            }
        });



        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });


</script>
</body>
</html>
